<div [@routerTransition]>
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>标签</span>
                        <small>管理标签</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <!-- <button (click)="exportToExcel()" class="btn green-haze"><i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}</button> -->
            <button (click)="createTag()" class="btn btn-primary blue">
                <i class="fa fa-plus"></i> 创建新标签</button>
        </div>
    </div>

    <div class="portlet light margin-bottom-0">
        <div class="portlet-body">
            <div class="form">
                <!-- <form class="horizontal-form" autocomplete="off">
                  <div class="form-body">
                      <div class="row margin-bottom-10">
                          <div class="col-md-12">
                              <div class="inputs inputs-full-width">
                                  <div class="portlet-input">
                                      <div class="input-group">
                                          <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control" [placeholder]="l('SearchWithThreeDot')" type="text">
                                          <span class="input-group-btn">
                                              <button (click)="getTag()" class="btn default" type="submit"><i class="icon-magnifier"></i></button>
                                          </span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="row margin-bottom-10" [hidden]="!advancedFiltersAreShown">
                          <div [ngClass]="{'col-md-6': isGranted('Pages.Administration.Roles'), 'col-md-12':!isGranted('Pages.Administration.Roles')}">
                              <div class="form-group">
                                  <permission-combo [(selectedPermission)]="selectedPermission"></permission-combo>
                              </div>
                          </div>
                          <div class="col-md-6" *ngIf="isGranted('Pages.Administration.Roles')">
                              <div class="form-group">
                                  <role-combo [(selectedRole)]="role" emptyText="{{l('FilterByRole')}}"></role-combo>
                              </div>
                          </div>
                      </div> 
                  </div>
                   <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                      <div class="col-sm-12 text-right">
                          <button class="btn blue" (click)="getTag()"><i class="fa fa-refresh"></i> {{l("Refresh")}}</button>
                      </div>
                  </div>
                  <div class="row margin-bottom-10">
                      <div class="col-sm-12">
                          <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                          <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                      </div>
                  </div> 
              </form> -->

                <div class="row margin-bottom-10">
                    <div class="col-sm-12 text-right">
                        <button class="btn blue" (click)="getTag()">
                            <i class="fa fa-refresh"></i> {{l("Refresh")}}</button>
                    </div>
                </div>
            </div>

            <!--<Primeng-Datatable-Start>-->
            <div class="primeng-datatable-container" [busyIf]="primengDatatableHelper.isLoading">
                <p-dataTable #dataTable (onLazyLoad)="getTag($event)" [value]="primengDatatableHelper.records" rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
                    [paginator]="false" [lazy]="true" emptyMessage="{{l('NoData')}}" scrollable="true" ScrollWidth="100%" responsive="primengDatatableHelper.isResponsive"
                    resizableColumns="primengDatatableHelper.resizableColumns">

                    <p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'75px'}" [hidden]="!isGrantedAny('Pages.Tag.Edit', 'Pages.Tag.Delete')">
                        <ng-template let-record="rowData" pTemplate="body">
                            <div class="btn-group dropdown" normalizePosition>
                                <button class="dropdown-toggle btn btn-xs btn-primary blue" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-cog"></i>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <!-- <li>
                                      <a *ngIf="permission.isGranted('Pages.Administration.Users.Impersonation') && record.id !== appSession.userId"
                                         (click)="_impersonationService.impersonate(record.id, appSession.tenantId)">{{l('LoginAsThisUser')}}</a>
                                  </li> -->
                                    <li>
                                        <a *ngIf="permission.isGranted('Pages.Tag.Edit')" (click)="createOrEditTagModal.show(record.id)">{{l('Edit')}}</a>
                                    </li>
                                    <!-- <li>
                                      <a *ngIf="permission.isGranted('Pages.Administration.Users.ChangePermissions')"
                                         (click)="editUserPermissionsModal.show(record.id, record.userName)">{{l('Permissions')}}</a>
                                  </li>
                                  <li>
                                      <a *ngIf="permission.isGranted('Pages.Administration.Users.ChangePermissions')"
                                         (click)="unlockUser(record)">{{l('Unlock')}}</a>
                                  </li> -->
                                    <li>
                                        <a *ngIf="permission.isGranted('Pages.Tag.Delete')" (click)="deleteTag(record)">{{l('Delete')}}</a>
                                    </li>
                                </ul>
                            </div>
                        </ng-template>
                    </p-column>
                    <p-column field="name" header="名称" [sortable]="true" [style]="{'width':'150px'}"></p-column>
                    <!-- <p-column field="publishedtime" header="发布时间" [sortable]="true" [style]="{'width':'150px'}"></p-column> -->
                    <p-column field="tagType" header="类型" [sortable]="true" [style]="{'width':'150px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                        <span class="label label-success" *ngIf="record.tagType===1">文章</span>
                        <span class="label label-info" *ngIf="record.tagType===2">视频</span>
                    </ng-template>

                    </p-column>

                    <!-- <p-column field="roles" header="{{l('Roles')}}" [sortable]="false" [style]="{'width':'150px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                          {{getRolesAsString(record.roles)}}
                      </ng-template>
                  </p-column> -->
                    <!-- <p-column field="commentnum" header="评论数" [sortable]="true" [style]="{'width':'250px'}"></p-column>
                  <p-column field="publishRemark" header="发布标记" [sortable]="true" [style]="{'width':'200px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                          <span class="label label-success" *ngIf="record.publishRemark">{{l('Yes')}}</span>
                          <span class="label label-default" *ngIf="!record.publishRemark">{{l('No')}}</span>
                      </ng-template>
                  </p-column> -->
                    <!-- <p-column field="isActive" header="{{l('Active')}}" [sortable]="true" [style]="{'width':'100px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                          <span class="label label-success" *ngIf="record.isActive">{{l('Yes')}}</span>
                          <span class="label label-default" *ngIf="!record.isActive">{{l('No')}}</span>
                      </ng-template>
                  </p-column> -->
                    <!-- <p-column field="publishedTime" header="发布时间" [sortable]="true" [style]="{'width':'150px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                          <span *ngIf="record.publishedTime">{{record.publishedTime | momentFormat:'L'}}</span>
                          <span *ngIf="!record.publishedTime">-</span>
                      </ng-template>
                  </p-column>
                  <p-column field="creationTime" header="创建时间" [sortable]="true" [style]="{'width':'200px'}">
                      <ng-template let-record="rowData" pTemplate="body">
                          {{record.creationTime | momentFormat:'L'}}
                      </ng-template>
                  </p-column> -->
                </p-dataTable>
                <div class="primeng-paging-container">
                    <p-paginator rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}" #paginator (onPageChange)="getTag($event)" [totalRecords]="primengDatatableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengDatatableHelper.predefinedRecordsCountPerPage">
                    </p-paginator>
                    <span class="total-records-count">
                        {{l('TotalRecordsCount', primengDatatableHelper.totalRecordsCount)}}
                    </span>
                </div>
            </div>
            <!--<Primeng-Datatable-End>-->
        </div>
    </div>

    <createOrEditTagModal #createOrEditTagModal (modalSave)="getTag()"></createOrEditTagModal>

</div>
